<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="auto"
    >
      <el-form-item label="设备ID" prop="deviceId">
        <el-input
          v-model="queryParams.deviceId"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
          placeholder="请输入设备ID"
        />
        <!--     <el-select
               filterable
               clearable
               v-model="queryParams.deviceId"
               @keyup.enter.native="handleQuery"
               size="small"
               placeholder="请选择设备ID"
             >
               <el-option
                 v-for="item in placeManagerOptions"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
               >
               </el-option>
             </el-select>-->
      </el-form-item>
      <el-form-item label="异常类型" prop="equipmentFalutType">
        <el-select
          filterable
          clearable
          v-model="queryParams.equipmentFalutType"
          @keyup.enter.native="handleQuery"
          size="small"
          placeholder="请选择异常类型"
        >
          <el-option
            v-for="item in equipmentFalutTypeOptions"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="上报人姓名" prop="reportName">
        <el-input
          v-model="queryParams.reportName"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
          placeholder="请输入上报人姓名"
        />
      </el-form-item>
      <el-form-item label="手机号码" prop="reportPhone">
        <el-input
          v-model="queryParams.reportPhone"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
          placeholder="请输入上报人手机号码"
        />
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 250px"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="handleQuery"
        >搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['monitor:faultlog:add']"
        >新增
        </el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['monitor:faultlog:remove']"
        >删除
        </el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['monitor:faultlog:export']"
        >导出
        </el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="logList"
      @selection-change="handleSelectionChange"
      ref="falutTableRef"
      tooltip-effect="light"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
        :selectable="selectable"
      />
      <el-table-column
        label="生成时间"
        align="center"
        prop="createTime"
        width="100"
      >
        <template slot-scope="scope">
          {{ $moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column
        label="设备ID"
        align="center"
        prop="deviceId"
      />
      <el-table-column
        label="设备部署名称"
        align="center"
        prop="deploymentName"
      />
      <el-table-column
        label="异常类型"
        align="center"
        prop="equipmentFalutType"
        width="120"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.equipmentFalutType === '0'" type="danger" size="small">
            运行中上报
          </el-tag>
          <el-tag v-else-if="scope.row.equipmentFalutType === '1'" type="warning" size="small">
            人工上报
          </el-tag>
          <el-tag v-else size="small">
            开机自检上报
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="异常编码" align="center" prop="errorCode"/>
      <el-table-column label="上报人姓名" align="center" prop="reportName"/>
      <el-table-column
        label="异常内容"
        align="center"
        prop="errorMessage"
      >
        <template slot-scope="scope">
          <el-popover
            trigger="hover"
            placement="top"
            v-if="scope.row.errorMessage.length <= 500"
            width="500"
          >
            <p style="font-size: 12px">{{ scope.row.errorMessage }}</p>
            <div slot="reference">
              {{
                scope.row.errorMessage.length > 6
                  ? scope.row.errorMessage.substring(0, 6) + "..."
                  : scope.row.errorMessage
              }}
            </div>
          </el-popover>
          <span v-else>
            <el-popover trigger="hover" placement="top">
              <p style="font-size: 12px">异常内容量过大，请点击详细按钮查看</p>
              <div slot="reference" class="overflow">
                {{ scope.row.errorMessage.substring(0, 6) + "..." }}
              </div>
            </el-popover></span>
        </template>
      </el-table-column>
      <el-table-column label="故障图片" align="center" prop="image">
        <template slot-scope="scope">
          <div class="img-wrap" v-if="scope.row.image">
            <el-tooltip
              v-for="(imgItem,index) in getFileUrlList(scope.row.image)"
              :key="index"
              effect="dark" content="点击放大"
              placement="top"
            >
              <el-image
                :key="index"
                :src="imgItem"
                :preview-src-list="getFileUrlList(scope.row.image)"
                fit="contain"
                class="el-image"
              />
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-order"
            @click="transWorkOrder(scope.row, scope.index)"
            v-hasPermi="['monitor:faultlog:transWorkOrder']"
          >转工单
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row, scope.index)"
            v-hasPermi="['monitor:faultlog:query']"
          >详细
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['monitor:faultlog:edit']"
            v-show="scope.row.equipmentFalutType === '1'"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['monitor:faultlog:remove']"
            v-show="scope.row.equipmentFalutType === '1'"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 故障日志详细 -->
    <el-dialog
      title="故障日志详细"
      :visible.sync="equipmentFaultLogOpen"
      width="750px"
      append-to-body
    >
      <el-form
        ref="equipmentFaultLogOpenForm"
        :model="equipmentFaultLogOpenForm"
        label-width="134px"
        size="mini"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="设备ID：">
              {{ equipmentFaultLogOpenForm.deviceId }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="设备部署名称：">
              {{ equipmentFaultLogOpenForm.deploymentName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="异常类型：">
              <el-tag
                v-if="equipmentFaultLogOpenForm.equipmentFalutType === '0'"
                type="danger"
                size="small"
              >
                运行中上报
              </el-tag>
              <el-tag
                v-else-if="equipmentFaultLogOpenForm.equipmentFalutType === '1'"
                type="warning"
                size="small"
              >
                人工上报
              </el-tag>
              <el-tag v-else size="small">
                开机自检上报
              </el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="异常编码：">
              {{ equipmentFaultLogOpenForm.errorCode }}
            </el-form-item>
          </el-col>
          <el-col :span="12" v-show="equipmentFaultLogOpenForm.reportName">
            <el-form-item label="上报人姓名：">
              {{ equipmentFaultLogOpenForm.reportName }}
            </el-form-item>
          </el-col>
          <el-col :span="12" v-show="equipmentFaultLogOpenForm.reportPhone">
            <el-form-item label="上报人手机号码：">
              {{ equipmentFaultLogOpenForm.reportPhone }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="异常内容：" class="errorWarp">
              <span class="errorTag">{{
                  equipmentFaultLogOpenForm.errorMessage
                }}</span>
            </el-form-item>
          </el-col>
            <el-col :span="24">
              <el-form-item label="故障图片：">
                <el-image
                  v-for="(item,index) in detailFaultImagesList"
                  :key="index"
                  fit="contain"
                  :src="item"
                  :preview-src-list="detailFaultImagesList"
                  ref="elImage"
                  class="detail-img-wrap"
                />
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生成时间：">
              {{ $moment(equipmentFaultLogOpenForm.createTime).format('YYYY-MM-DD HH:mm:ss') }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="equipmentFaultLogOpen = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改故障日志管理对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="780px"
      append-to-body
      @closed="imagesFileList = []"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="134px"
        size="medium"
        v-loading="isUploading"
        element-loading-text="上传数据中"
      >
        <el-form-item label="设备ID" prop="deviceId">
          <el-select filterable clearable placeholder="请选择" v-model="form.deviceId">
            <el-option
              v-for="item in placeManagerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="异常类型" prop="equipmentFalutType">
          <el-select v-model="form.equipmentFalutType" placeholder="请选择">
            <el-option
              v-for="item in logOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="异常内容" prop="errorMessage">
          <el-input
            v-model="form.errorMessage"
            type="textarea"
            placeholder="请输入内容"
            :autosize="{ minRows: 2, maxRows: 5}"
          />
        </el-form-item>
        <el-form-item label="上传图片" prop="igm">
          <div style="height: 170px">
            <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false"
              :file-list="imagesFileList"
              multiple
              :on-change="handleImageChange"
              :limit="3"
              :on-exceed="handleExceed"
              accept=".jpeg,.jpg,.png"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <el-image
                  fit="contain"
                  :src="file.url"
                  :preview-src-list="previewImagesList"
                  ref="elImage"
                  style="width: 146px; height:146px;"
                >
                </el-image>
                <!--              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">-->
                <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
              </div>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="上报人姓名" prop="reportName">
          <el-input v-model="form.reportName" placeholder="请输入上报人姓名"/>
        </el-form-item>
        <el-form-item label="上报人手机号码" prop="reportPhone">
          <el-input v-model="form.reportPhone" placeholder="请输入手机号码" maxlength="11" show-word-limit/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <add-work-order-dialog
      v-model="addWorkOrderDialogVisible"
      mode="form"
      :device-data="form"
      isFaultLogUse
    />
  </div>
</template>

<script>
import AddWorkOrderDialog from '@/views/operationAndMonitoring/workerOrder/components/addWorkOrderDialog'
import {
  listFaultLog,
  getFaultLog,
  delFaultLog,
  addFaultLog,
  updateFaultLog,
  cleanFaultLog,
  commonUpload
} from "@/api/monitor/equipmentFault";
import {base64toFile} from "@/utils/imageUrlToFile";
import axios from '@/utils/request'

export default {
  name: "FaultLog",
  components: {AddWorkOrderDialog},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 故障日志管理表格数据
      logList: [],
      // 所有正常故障日志数据，0为正常
      faultPptionsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      equipmentFaultLogOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deviceId: null,
        equipmentFalutType: null,
        reportName: null,
        reportPhone: null,
        errorMessage: null,
        startTime: null,
        endTime: null,
      },
      // 表单参数
      form: {
        id: null,
        deviceId: null,
        equipmentFalutType: null,
        reportName: null,
        reportPhone: null,
        errorMessage: null,
        logTime: null,
        image: null,
      },
      //详情框表单
      equipmentFaultLogOpenForm: {},
      // 表单校验
      rules: {
        deviceId: [
          {required: true, message: "设备ID不能为空,", trigger: "blur"},
        ],
        reportName: [
          {required: true, message: "上报人名称不能为空,", trigger: "blur"},
        ],
        equipmentFalutType: [
          {required: true, message: "异常类型不能为空,", trigger: "blur"},
        ],
        reportPhone: [
          {required: true, message: "手机号不能为空,", trigger: "blur"},
          {
            pattern:
              /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: "请输入正确的手机号",
            trigger: "change",
          },
        ],
        errorMessage: [
          {required: true, message: "异常内容不能为空", trigger: "blur"},
        ],
      },
      //判断修改框是否显示其他上报
      logOption: [
        {value: "1", label: "人工上报"},
      ],
      //异常类型搜索框
      equipmentFalutTypeOptions: [
        {value: null, label: "全部"},
        {id: 1, value: "0", label: "运行中上报"},
        {id: 2, value: "1", label: "人工上报"},
        {id: 3, value: "2", label: "开机自检上报"},
      ],
      //时间
      dateRange: [],
      imagesFileList: [],
      // 正在上传图片提示
      isUploading: false,
      addWorkOrderDialogVisible: false,
    };
  },
  computed: {
    //获取添加修改设备ID下拉框数据
    placeManagerOptions() {
      return this.$store.state.device.placeManagerOptions || []
    },
    // 修改故障日志预览大图url数组
    previewImagesList() {
      return this.imagesFileList.map(item => item.url)
    },
    // 故障日志详细图片列表
    detailFaultImagesList() {
      if (this.equipmentFaultLogOpenForm.image) {
        return this.equipmentFaultLogOpenForm.image.split(",")
      }
      return []
    }
  },
  created() {
    // 设置默认开始结束时间为今天
    const today = this.parseTime(new Date(), '{y}-{m}-{d}');
    this.dateRange = [`${today} 00:00:00`, `${today} 23:59:59`];
  },
  methods: {
    transWorkOrder(row) {
      this.addWorkOrderDialogVisible = true;
      this.form = JSON.parse(JSON.stringify(row));
    },
    getFileUrlList(val) {
      if (val) {
        return Array.isArray(val) ? val : val.split(',');
      } else {
        return [];
      }
    },
    // 图片超过3张
    handleExceed() {
      this.$modal.msgWarning("最多只能上传3张图片");
    },
    // 上传图片改变
    handleImageChange(file, fileList) {
      this.imagesFileList = fileList;
      // 标记图片修改
      if (!this.imagesHasChanged) this.imagesHasChanged = true;
      // 图片大小不能大于10M
      if (file.raw.size >= 10 * 1024 * 1024) {
        this.$modal.msgWarning("图片大小不能大于10M");
        this.handleRemove(file);
      }

    },
    // 删除图片
    handleRemove(file) {
      // 标记图片修改
      if (!this.imagesHasChanged) this.imagesHasChanged = true;

      // 删除imagesFileList对应file
      this.imagesFileList = this.imagesFileList.filter(item => {
        return item.uid !== file.uid
      })
    },
    // 预览图片
    handlePictureCardPreview() {
      this.$refs.elImage.showViewer = true;
    },
    /** 查询故障日志管理列表 */
    getList() {
      this.loading = true;
      if (this.dateRange != null) {
        this.queryParams.startTime = this.dateRange[0];
        this.queryParams.endTime = this.dateRange[1];
      } else {
        this.queryParams.startTime = null;
        this.queryParams.endTime = null;
      }
      listFaultLog(this.queryParams).then((response) => {
        // 是否已经加载过设备列表标记改为true
        if (!this.alreadyGetList) this.alreadyGetList = true;
        this.logList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      // 标记是否修改过图片
      this.imagesHasChanged = false;
      this.form = {
        id: null,
        deviceId: null,
        equipmentFalutType: "1",
        reportName: null,
        reportPhone: null,
        errorMessage: null,
        logTime: null,
        image: null,
        remark: null,
      };
      this.resetForm("form");
    },
    /** 详细按钮操作 */
    handleView(row) {
      this.equipmentFaultLogOpen = true;
      this.equipmentFaultLogOpenForm = row;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.deviceId = null;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      const idsf = selection.filter((item) => {
        return item.equipmentFalutType.indexOf("1") !== -1;
      });
      this.ids = idsf.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 多选框根据异常类型禁用,只有人工上报多选框能用
    selectable(row, index) {
      if (row.equipmentFalutType != "0" && row.equipmentFalutType != "2") {
        return true;
      }
    },
    /**清空按钮操作 */
    handleClean() {
      this.$modal
        .confirm("是否确认清空所有操作日志数据项？")
        .then(function () {
          return cleanFaultLog();
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("清空成功");
        })
        .catch(() => {
        });
    },
    /** 返回设备部署页面 */
    goBack() {
      this.$router.go(-1);
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加故障日志管理";
      this.updateShow = true;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.form = row;
      if (row.image) {
        const taskList = row.image.split(",").map((url) => {
          return new Promise((resolve, reject) => {
            this.urlToFile(url, resolve, reject);
          });
        });
        // 加载图片
        Promise.all(taskList).then(res => {
          // 构造出跟el-upload组件的fileList的结构
          this.imagesFileList = res.map((item, index) => {
            return {
              ...item,
              url: URL.createObjectURL(item.raw),
              uid: Date.now() + index
            }
          });
        }).catch(() => this.$modal.msgError('获取故障图片失败！'));
      }
      this.open = true;
      this.title = "修改故障日志管理";
    },
    // 图片url转成文件对象
    urlToFile(url, success, fail) {
      axios.get(url, {responseType: 'blob'})
        .then((blob) => {
          const reader = new FileReader();
          // 转base64
          reader.readAsDataURL(blob);
          reader.onloadend = () => {
            const extName = url.match(/\.(jpg|png|jpeg|gif)$/)[0];
            // 图片文件名
            const fileName = Date.now() + extName;
            const file = base64toFile(reader.result, fileName);
            file.extName = extName;
            success && success({raw: file});
          }
        })
        .catch(() => fail && fail())
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 更新日志接口方法
          const updateReq = () => {
            updateFaultLog(this.form).then(() => {
              this.isUploading = false;
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            })
          }

          // 正在上传中提示
          this.isUploading = true;
          if (this.form.id != null) {
            // 如果有修改图片，先调用图片上传方法，再更新基本数据
            if (this.imagesHasChanged) {
              this.uploadImages(updateReq);
            } else {
              // 只更新基本数据 不用重新上传图片
              updateReq();
            }

          } else {
            // 上传图片
            this.uploadImages(
              () => {
                // 上传图片成功回调
                addFaultLog(this.form).then((response) => {
                  this.isUploading = false;
                  this.$modal.msgSuccess("新增故障成功");
                  this.open = false;
                  this.getList();
                })
              }
            )
          }
        }
      });
    },

    // 上传多张图片
    uploadImages(callBack) {
      const uploadReqList = [];

      // 如果清空了图片
      if (!this.imagesFileList.length) {
        this.form.image = '';
        return callBack && callBack();
      }

      for (var i = 0; i < this.imagesFileList.length; i++) {
        let formData = new FormData();
        formData.append("file", this.imagesFileList[i].raw);
        uploadReqList.push(commonUpload(formData))
      }

      Promise.all(uploadReqList).then(res => {
        const urlArray = res.map(item => item.data);
        // 将url拼接传给后端
        this.form.image = urlArray.join(",")
        this.$modal.msgSuccess('图片上传成功！');
        callBack && callBack();
      }).catch(err => {
        this.isUploading = false;
        this.$modal.msgError('图片上传失败，请重新提交');
      })
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除故障日志管理编号为"' + ids + '"的数据项？')
        .then(function () {
          return delFaultLog(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {
        });
    },
    /** 导出按钮操作 */
    handleExport() {
      const currentDate = this.parseTime(new Date());
      this.download("monitor/faultlog/export", {
          ...this.queryParams,
        }, `设备故障日志_${currentDate}.xlsx`
      );
    },
  },
  beforeRouteEnter(to, from, next) {
    const {deviceId} = to.query;
    // 如果存在跳转参数deviceInnerCode,自动填入查询条件
    if (deviceId) {
      next(vm => {
        vm.resetForm("queryForm");
        vm.queryParams.deviceId = deviceId;
        vm.getList();
      })
    } else {
      // 不存在查询参数
      next(vm => {
        // 是否已加载过列表，第一次进入才调用获取列表接口
        if (!vm.alreadyGetList) {
          vm.getList();
        }
      });
    }
  },
  /* // 在离开页面时清空跳转携带的参数 暂时不用
  beforeRouteLeave(to, from, next) {
    // 如果当前路由存在deviceInnerCode参数，跳转前清空参数
    if (this.$route.query.deviceId) {
      this.queryParams.deviceId = null;
      // 重新加载列表
      this.getList();
    }
    next();
  },*/
};
</script>
<style scoped lang="scss">
.errorTag {
  display: block;
  width: 100%;
  max-height: 350px;
  overflow: auto;
}

::v-deep .el-select {
  width: 100%;
}

.overflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.remarkLeft {
  margin-left: -13px !important;
}

.detail-img-wrap {
  width: 146px;
  height: 146px;
  margin-right: 10px;
  overflow: hidden;
  background-color: #fff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
}

.img-wrap {
  display: flex;
  justify-content: center;

  .el-image {
    display: block;
    width: 50px;
    height: 50px;
    margin-right: 5px;
    background: #eef0f3;

    &:last-child {
      margin-right: 0;
    }
  }
}

</style>
